<template>
	<view class="bg-white">
		<!-- 姓名 -->
		<view class="mlr-36 u-m-t-30">
			<view class="flex">
				<view class="ml-30 size-36">车主姓名</view>
				<view class="ml-10 mr-100"><input v-model="car_username" maxlength="10" type="text"
						placeholder="请输入车主姓名" />
				</view>
			</view>
			<view class="mt-20" style="border-top: solid 0.5px #eeeeee;"></view>
		</view>
		<!-- 电话 -->
		<view class="mt-20">
			<view class="mlr-36">
				<view class="flex">
					<view class="ml-30 size-36">手机号</view>
					<view class="ml-10 mr-100 "><input v-model="car_userphone" maxlength="11" type="number"
							placeholder="请输入手机号" /></view>
				</view>
			</view>
			<view class="mt-20" style="border-top: solid 5px #eeeeee;"></view>
		</view>

		<!-- 车牌号 -->
		<view class="mlr-36 mt-20">
			<view class="flex">
				<view class="ml-30 size-36 ">车牌号</view>
				<view class="ml-10 mr-100 "><input v-model="car_pai" maxlength="15" type="text" placeholder="请输入车牌号" />
				</view>
			</view>
			<view class="mt-20" style="border-top: solid 0.5px #eeeeee;"></view>
		</view>
		<!-- 车牌号 -->
		<view class="mlr-36 mt-20">
			<view class="flex">
				<view class="ml-30 size-36 ">车辆品牌</view>
				<view class="ml-10 mr-100 "><input v-model="car_name" maxlength="15" type="text"
						placeholder="请输入车辆品牌" /></view>
			</view>
			<view class="mt-20" style="border-top: solid 0.5px #eeeeee;"></view>
		</view>
		<!-- 挡位 -->
		<!-- 	<view class="mlr-36 mt-20">
			<view class="flex" style=" width: 100%; ">
				<view class="ml-30 size-36 w100">挡位类型</view>
				<view class="w100" style=" margin-left: -140px;">
					<u-radio-group v-model="car_dw>0?car_dw:value" iconPlacement="right">
						<u-radio v-for="(item,index) in items" @change="radioChange" :name="item.name"
							activeColor="#3CBCA3">{{item.name}}</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="mt-20" style="border-top: solid 0.5px #eeeeee;"></view>
		</view> -->
		<!-- 车辆型号 -->
		<view class="mt-20">
			<view class="mlr-36">
				<view class="flex">
					<view class="ml-30 size-36 ">车辆类型</view>
					<view class="ml-10 mr-100 "><input v-model="car_type" maxlength="15" type="text"
							placeholder="常规车/新能源" />
					</view>
				</view>
			</view>
			<view class="mt-20 mlr-36" style="border-top: solid 0.5px #eeeeee;"></view>
		</view>
		<!-- 车辆里程 -->
		<view class="mt-20">
			<view class="mlr-36">
				<view class="flex">
					<view class="ml-30 size-36 ">车辆里程</view>
					<view class="ml-10 mr-100 "><input v-model="car_licheng" maxlength="15" type="number"
							placeholder="请输入车辆里程" />
					</view>
				</view>
			</view>
			<view class="mt-20" style="border-top: solid 5px #eeeeee;"></view>
		</view>
		<!-- 车辆照片 -->
		<view class="mt-20">
			<view class="mlr-36">
				<view class="">
					<view class="ml-30 size-36 ">车辆照片</view>
					<view class="mt-20" @click="fileChooseImg">

						<view class="" v-if="this.carFiles.length>1">
							<image class="mlr-36 mb-10 mt-10"
								style="width: 360rpx; height: 260rpx;  border:1px #c7c7c7 solid ; border-radius: 26rpx;"
								:src="carFiles" mode="">
							</image>
						</view>
						<view class="" v-else>
							<u-icon class="mlr-36 mb-10 mt-10 " style="padding: 40rpx; border:1px #c7c7c7 solid ;"
								name="plus" color="#3cbca3" size="100">
							</u-icon>
						</view>

					</view>
				</view>
			</view>
			<view class="mt-20" style="border-top: solid 5px #eeeeee;"></view>
		</view>

		<view class="mlr-36 mt-100 ">
			<u-button shape="circle" :custom-style="customStyle" @click="subCar()">
				确认添加
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				// 演示地址，请勿直接使用
				action: 'https://www.ningboxiaobokeji.com/api/common/upload',
				fileList: [],
				File: '',
				//呼叫代驾 create
				user_id: '',
				car_username: '', //车主姓名
				car_userphone: '', //车主手机号
				car_pai: '', //车牌
				car_type: '', //车辆型号
				car_name: '', //车辆品牌
				car_licheng: '',
				car_img: '',
				customStyle: {
					background: '#3CBCA3 !important',
					color: '#fff !important',
					border: 'none !important'
				},
				carFiles: ''
			}
		},
		computed: {
			...mapState(["start", "end", "userInfo"]),
		},
		onLoad() {
			this.getUserInfo();
		},

		methods: {
			// 点击从手机相册选择
			fileChooseImg() {
				uni.chooseImage({
					sourceType: ['album'], //相册选择
					crop: {
						width: 375,
						height: 375,
						resize: false
					},
					// 在手机端可以正常运行
					success: chooseImageRes => {
						console.log('成功', chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://www.ningboxiaobokeji.com/api/common/upload', // 仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: res => {
								res = JSON.parse(res.data)
								// console.log(res)
								if (res.code == 1) {
									let that = this
									uni.showToast({
										icon: 'loading',
										title: '图片上传中',
										mask: true,
										success(result) {
											// 判断是否成功
											if (result.errMsg === 'showToast:ok') {
												that.carFiles = res.data.fullurl //图片地址
											} else {
												uni.showToast({
													icon: "error",
													title: "操作无效,请重试",
												})
											}
										}
									})

								} else {
									this.$u.toast('error');
								}
							}
						});
					},
					fail: err => {
						this.myToast('图片上传失败', 'none');
					}
				});

			},
			//上传信息
			subCar() {
				if (this.car_username == '') {
					uni.showToast({
						title: '请输入车主姓名',
						icon: 'none'
					})
				} else if (this.car_userphone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
				} else if (this.car_pai == '') {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					})
				} else if (this.car_name == '') {
					uni.showToast({
						title: '请输入车辆品牌',
						icon: 'none'
					})
				} else if (this.car_type == '') {
					uni.showToast({
						title: '请输入车辆类型',
						icon: 'none'
					})
				} else if (this.car_licheng == '') {
					uni.showToast({
						title: '请输入车辆里程',
						icon: 'none'
					})
				} else if (this.carFiles == '') {
					uni.showToast({
						title: '请上传车辆照片',
						icon: 'none'
					})
				} else {
					this.$http('/index.php/api/index/addcar', {
						user_id: this.user_id,
						car_username: this.car_username, //车主姓名
						car_userphone: this.car_userphone, //车主手机号
						car_pai: this.car_pai, //车牌
						car_type: this.car_type, //车辆型号
						car_name: this.car_name, //车辆品牌
						car_licheng: this.car_licheng, //车辆里程
						car_img: this.carFiles,
					}, "POST").then((data) => {
						uni.showToast({
							title: "添加成功"
						})
						uni.navigateTo({
							url: '/pages/my/Car'
						})
					})
				}
			},
			getUserInfo() {
				this.$http('/addons/ddrive/user/userInfo ', {}, "GET").then(data => {
					this.user_id = data.id;
					console.log(data);
					uni.stopPullDownRefresh();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		// background-color: #F1EFEF;
		width: 100%;
		height: 100%;
	}
</style>
